<template>
  <div id="home" class="home view primary-blue">
    <common-header />
    <main-banner :lists="homeBanner" />
    <main-classification :recommendCate="recommendCate"/>
    <product-module :lists="MainDaily" :margin-bottom="26" id="dailyNews">
      <template v-slot:title>
        <product-module-title :title="$t('HomeModuleTitle2')" >
          <template v-slot:more>
            <div class="all" @click="handleMoreClick">
              {{ $t('CommonMoreText') }} <i class="el-icon-arrow-right"></i>
            </div>
          </template>
        </product-module-title>
      </template>
    </product-module>
    <banner-content />
    <product-module :lists="recommendList" id="recommendProduct">
      <template v-slot:title>
        <product-module-title :title="$t('HomeModuleTitle3')" />
      </template>
    </product-module>
    <div class="main-store app-container">
      <product-module-title :title="$t('HomeModuleTitle4')" id="recommendStore" />
      <main-store :randShop="randShop"/>
      <product-module :lists="hotList">
        <template v-slot:title>
          <product-module-title :title="$t('HomeModuleTitle5')" id="hotProduct" />
        </template>
      </product-module>
    </div>
    <download-content />
    <icon-tips />
    <shop-cart />
    <th-back />
    <common-footer />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { indexApi } from '@/api/index.js'
import { useRouter } from "vue-router";
import CommonHeader from "@/components/common/CommonHeader.vue";
import MainClassification from "@/components/home/MainClassification.vue";
import BannerContent from "@/components/home/BannerContent.vue";
import DownloadContent from "@/components/home/DownloadContent.vue";
import IconTips from "@/components/common/IconTips.vue";
import CommonFooter from "@/components/common/CommonFooter.vue";
import ProductModule from "@/components/common/ProductModule.vue";
import ProductModuleTitle from "@/components/common/ProductModuleTitle.vue";
import MainStore from "@/components/home/MainStore.vue";
import MainBanner from "@/components/home/MainBanner.vue";
import ShopCart from "@/components/common/ShopCart.vue";
import ThBack from "@/components/home/ThBack.vue";
const router = useRouter()
const homeBanner = ref([])
const MainDaily = ref([])
const recommendCate = ref([])
const randShop = ref([])
const recommendList = ref([])
const hotList = ref([])
const getIndex = () => {
  indexApi().then(res => {
    localStorage.setItem('logo', res.data.logo)
    homeBanner.value = res.data.lunbo
    MainDaily.value = res.data.new_list
    recommendCate.value = res.data.category
    randShop.value = res.data.rand_shop
    recommendList.value = res.data.rand_list.splice(0, 8)
    hotList.value = res.data.rand_list.splice(0, 8)
  }).catch(err => {})
}
getIndex()
const handleMoreClick = () => {
  router.push('/product')
}
</script>
<style scoped lang="scss">
.home{
  position: relative;
}
.product-module-title .all {
  cursor: pointer;
  font-weight: 400;
}
.main-store {
  margin-top: 26px;
  margin-bottom: 26px
}
.product-module-title .all, .main-daily-title span {
  color: var(--color-main);
  font-size: 12px;
}
.el-icon-arrow-right:before {
  content: "\e6e0";
}
</style>
